const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode: "development",
    devtool: 'soruce-map',
    output: {
        filename: 'scripts/[name].[chunkhash:5].js'
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin()
    ],
    devServer:{
        open:true
    },
    module:{
        rules:[
            {
                // file-loader 可以把 import/require 导入的文件进行处理 输出对应文件到输出目录 返回一个路径 
                // file-loader 执行逻辑
                // function file-loader(params) {
                //     source 文件内容(图片内容buffer)
                //     1. 生成一个具有相同文件内容的文件输出到目录
                //     2. 返回一段代码 export default '文件地址'
                // }

                // url-loader  把一个文件转换为base64
                // function url-loader(params) {
                //     source 文件内容(图片内容buffer)
                //     1. 根据buffer生成 base64 编码
                //     2. 返回一段代码 export default 'base64编码'
                // }

                test: /\.(png|gif|jpg)$/,
                use: [
                    // {
                    //     loader:"file-loader",
                    //     options:{
                    //         // 是对应文件内容的 hash 
                    //         name: 'imgs/[name].[hash:8].[ext]'
                    //     }
                    // },
                    
                    {
                        loader:"url-loader",
                        options:{
                            // 默认 false 不限制文件大小 所有经过loader的文件经过都转换成base64
                            limit: 10 * 1024,  // 单位字节
                            name: 'imgs/[name].[hash:8].[ext]' // 当文件大小超过limit 内部就会使用 file-loader 进行处理
                        }
                        
                    }
                ],
            }
        ]
    }
    
}